<!DOCTYPE html>
<html lang="">
	<head>


		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>


		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			#live2dcanvas {
				border: 0 !important;
			}
		</style>
		<!-- jq -->
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 点击爱心特效 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
		<title><%= htmlWebpackPlugin.options.title %></title>
		<script src="https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js"></script>

		<script src="aixin.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" />

		<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

		<!-- <script src="js/L2Dwidget.0.min.js"></script>
	<script src="js/L2Dwidget.min.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
	<script src="https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js"></script> -->
		<link rel="stylesheet" type="text/css" href="css/ys.css" />
	</head>
	<body style="background:url(../src/assets/sy.jpg) no-repeat;">
		<noscript>
			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
				enabled. Please enable it to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->

		<!-- 彩虹 -->
		<span class="js-cursor-container"></span>
		<script>
			(function fairyDustCursor() {

				var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
				var width = window.innerWidth;
				var height = window.innerHeight;
				var cursor = {
					x: width / 2,
					y: width / 2
				};
				var particles = [];

				function init() {
					bindEvents();
					loop();
				}

				// Bind events that are needed
				function bindEvents() {
					document.addEventListener('mousemove', onMouseMove);
					window.addEventListener('resize', onWindowResize);
				}

				function onWindowResize(e) {
					width = window.innerWidth;
					height = window.innerHeight;
				}

				function onMouseMove(e) {
					cursor.x = e.clientX;
					cursor.y = e.clientY;

					addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
				}

				function addParticle(x, y, color) {
					var particle = new Particle();
					particle.init(x, y, color);
					particles.push(particle);
				}

				function updateParticles() {

					// Updated
					for (var i = 0; i < particles.length; i++) {
						particles[i].update();
					}

					// Remove dead particles
					for (var i = particles.length - 1; i >= 0; i--) {
						if (particles[i].lifeSpan < 0) {
							particles[i].die();
							particles.splice(i, 1);
						}
					}

				}

				function loop() {
					requestAnimationFrame(loop);
					updateParticles();
				}

				/**
				 * Particles
				 */

				function Particle() {

					this.character = "*";
					this.lifeSpan = 120; //ms
					this.initialStyles = {
						"position": "fixed",
						"display": "inline-block",
						"top": "0px",
						"left": "0px",
						"pointerEvents": "none",
						"touch-action": "none",
						"z-index": "10000000",
						"fontSize": "25px",
						"will-change": "transform"
					};

					// Init, and set properties
					this.init = function(x, y, color) {

						this.velocity = {
							x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
							y: 1
						};

						this.position = {
							x: x + 10,
							y: y + 10
						};
						this.initialStyles.color = color;

						this.element = document.createElement('span');
						this.element.innerHTML = this.character;
						applyProperties(this.element, this.initialStyles);
						this.update();

						document.querySelector('.js-cursor-container').appendChild(this.element);
					};

					this.update = function() {
						this.position.x += this.velocity.x;
						this.position.y += this.velocity.y;
						this.lifeSpan--;

						this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y +
							"px, 0) scale(" + (this.lifeSpan / 120) + ")";
					}

					this.die = function() {
						this.element.parentNode.removeChild(this.element);
					}

				}

				/**
				 * Utils
				 */

				// Applies css `properties` to an element.
				function applyProperties(target, properties) {
					for (var key in properties) {
						target.style[key] = properties[key];
					}
				}

				if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
			})();
		</script>


	</body>
	<script>
		// /* 这个script就写在html里面，千万不要把它加入引用文件，
		// 因为它需要等页面渲染完毕再执行，不然可爱的看板娘不会出来哦 */
		// L2Dwidget.init({
		// 	display: {
		// 		superSample: 2,
		// 		width: 150,
		// 		height: 400,
		// 		position: "left",
		// 		hOffset: 0,
		// 		vOffset: 0,
		// 	},
		// });


		var a_idx = 0;
		jQuery(document).ready(function($) {
			//点击body时触发事件
			$("body").click(function(e) {
				//需要显示的词语
				var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
				//设置词语给span标签
				var $i = $("<span/>").text(a[a_idx]);
				//下标等于原来下标+1  余 词语总数
				a_idx = (a_idx + 1) % a.length;
				//获取鼠标指针的位置，分别相对于文档的左和右边缘。
				//获取x和y的指针坐标
				var x = e.pageX,
					y = e.pageY;
				//在鼠标的指针的位置给$i定义的span标签添加css样式
				$i.css({
					"z-index": 999999,
					"top": y - 20,
					"left": x,
					"position": "absolute",
					"font-weight": "bold",
					"color": "#ff6651"
				});
				//在body添加这个标签
				$("body").append($i);
				//animate() 方法执行 CSS 属性集的自定义动画。
				//该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
				//详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
				$i.animate({
					//将原来的位置向上移动180
					"top": y - 180,
					"opacity": 0
					//1500动画的速度
				}, 1500, function() {
					//时间到了自动删除
					$i.remove();
				});
			});
		});
	</script>
	<style type="text/css">
		back-to-top {
			position: fixed;
			right: 50px;
			z-index: 9;
			width: 70px;
			height: 900px;
			background: url('/Content/Images/scroll.png');
			transition: 0.5s;
			cursor: pointer;
		}
	</style>

</html>
